<template>
     <el-table  :data="list" border ref="multipleTable" stripe tooltip-effect="dark">
        <el-table-column  prop="parentId" label="上级分类编号" >
          <template #default="scope">
            <span v-if="scope.row.parentId == 0" >
              一级分类
             </span>
            <span v-else-if="scope.row.parentId == 1">
              二级分类
            </span>
          </template>
        </el-table-column>
        <el-table-column  prop="name" label="货品类别名" ></el-table-column>
        <el-table-column  prop="level" label="分类级别"  >
          <template #default="scope">
            <span v-if="scope.row.level == 0" >
              一级分类
             </span>
            <span v-else-if="scope.row.level == 1">
              二级分类
            </span>
          </template>
        </el-table-column>
        <el-table-column  prop="sort" label="排序" ></el-table-column>
        <el-table-column  prop="keywords" label="关键字" ></el-table-column>
        
        <el-table-column  prop="brokerage" label="抽成比例" ></el-table-column>
        <el-table-column  prop="showStatus" label="是否显示" >
          <template #default="scope">
            <span v-if="scope.row.showStatus == 0" >
              不显示
             </span>
            <span v-else-if="scope.row.showStatus == 1">
              显示
            </span>
          </template>
        </el-table-column>
        <el-table-column  prop="note" label="备注信息" ></el-table-column>
        <el-table-column label="操作" width="220px">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="open(scope.row)">
          编辑分类
        </el-button>
        <el-button
          size="small"
          type="text"
          @click="() => handleDelete(scope.row)">删除分类
        </el-button>
      </template>
    </el-table-column>
     </el-table>
     <el-dialog v-model="dialogFormVisible" :before-close="beforeClose" title="编辑商品分类信息">
    <el-form ref="formRef" :model="updateForm" :rules="rules">
      <el-form-item prop="sort" label="排序：">
        <el-input v-model="updateForm.sort" />
      </el-form-item>
      <el-form-item prop="keywords" label="关键字：">
        <el-input v-model="updateForm.keywords" />
      </el-form-item>
      <el-form-item prop="note" label="备注信息：">
        <el-input v-model="updateForm.note" />
      </el-form-item>
      <el-form-item prop="brokerage" label="抽成比例：">
        <el-input type="number" v-model="updateForm.brokerage" />
      </el-form-item>
      <el-form-item prop="showStatus" label="是否显示：">
        <el-input v-model="updateForm.showStatus" />
      </el-form-item>
    </el-form>
    <el-button type="primary" style="margin-left: 50%;" @click="confirm()">提交</el-button>
  </el-dialog>

  <!-- <el-pagination
    background
    layout="prev, pager, next, total, sizes"
    :total="total"
    :current-page="tableData.pageNum"
    :page-size="tableData.pageSize"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  /> -->
  </template>
  
<script lang="ts" setup>
import { List, Timer } from '@element-plus/icons-vue'
import {getShop } from '../../../api';
import { ref ,reactive, onMounted,VueElement,nextTick} from 'vue'
import { getProductCategoryList ,updateProdCategory,deleteProductCate} from '../../../api';

onMounted(() => {
  // resetParentId();
  getList();
});


//列表字段数据
const list = ref([]);
const total = ref(0);
const listLoading = ref(true);
const parentId = ref(0);
const listQuery = ref({ pageNum: 1, pageSize: 5 });

const getList = async () => {
  listLoading.value = true;
  try {
    const response = await getProductCategoryList(parentId.value, listQuery.value);
    list.value = response.data.list;
    console.log(list.value)
    total.value = response.data.total;
  } finally {
    listLoading.value = false;
  }
};

//查询数据


//编辑列表字段
const dialogFormVisible = ref(false)
const formRef = ref()
      //校验字段
// const rules = reactive({
//   keywords: [{ required: false, trigger: 'blur', messege: '请填写货品关键字' }],
//   name: [{ required: false, trigger: 'blur', messege: '请填写货品名字' }],
//   note: [{ required: false, trigger: 'change', messege: '请填写备注' }],
//   price: [{ required: false, trigger: 'blur', messege: '青苔那些价格' }],
//   navStatus: [{ required: false, trigger: 'blur', messege: '请填写价格规则' }],
//   productCategoryId: [{ required: false, trigger: 'blur', messege: '请填写名字' }],
//   sort: [{ required: false, trigger: 'change', messege: '请填写排序' }],
//   showStatus: [{ required: false, trigger: 'blur', messege: '请填写货品单位' }],
// })

const updateForm = ref({
  brokerage: 0,
  keywords:'',
  level: 0,
  name: '',
  navStatus: 0,
  note: '',
  parentId: 0,
  showStatus: 0,
  sort: 0
})

const open = (rowData = {}) => {
  dialogFormVisible.value = true
  //弹窗打开form 声称是异步的
  nextTick(() => {
    //如果是编辑
    if (rowData) {
      Object.assign(updateForm.value, rowData)
      // updateForm.value = rowData
      console.log("这里是获取编辑数据", rowData)
    }
  })
}

const confirm = async () => {
  console.log('更新内容', updateForm)
  console.log('更新内容', updateForm.value)
  //把updateForm.value给列表的第一列
  let res = await updateProdCategory(updateForm);
  console.log('查看一下', updateForm)
  console.log('查看一下2', res)
  if (res.code == 200) {
    ElMessage({
      message: '修改成功',
      type: 'success',
      duration: 1000
    });
    getList()
  } else {
    ElMessage({
      message: res.message,
      type: 'error',
      duration: 1000
    });
  }
dialogFormVisible.value = false
}

//重置事件
const handleResetSearch = async () => {
  updateForm.value = {
  brokerage: 0,
  keywords:'',
  level: 0,
  name: '',
  navStatus: 0,
  note: '',
  parentId: 0,
  showStatus: 0,
  sort: 0
  };
  handleSearch();
}


// //关闭弹窗回调
const beforeClose = () =>{
  dialogFormVisible.value = false
  //重置表单
  handleResetSearch();
  //tree
}

//删除数据

const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm('是否要删除该商品信息', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });
    await deleteProductCate(row.id);
    ElMessage({
      message: '删除成功',
      type: 'success',
      duration: 1000
    });
    getList();
  } catch (error) {
    // Handle cancel or error
  }
};

</script>